<template>
  <v-app id="mail" class="mail">
    <v-toolbar fixed app flat dark color="indigo" clipped-left class="mail-toolbar" id="topbar">
      <v-toolbar-side-icon class="hidden-sm-and-up" @click="toggleDrawer"></v-toolbar-side-icon>
      <v-avatar class="hidden-sm-and-down">
        <img src="/static/m.png" alt="Vue Material Mail" />
      </v-avatar>
      <v-toolbar-title class="ml-0 pl-3">
        <span class="hidden-sm-and-down">Mail</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-text-field
        flat
        solo-inverted
        prepend-icon="search"
        label="What are you looking for?"
        class="hidden-sm-and-down"
      >
      </v-text-field>
      <v-btn icon>
        <v-icon>notifications</v-icon>
      </v-btn>
      <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
        <v-btn icon large flat slot="activator">
          <v-avatar size="32px">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" />
          </v-avatar>
        </v-btn>
        <v-list class="pa-0">
          <v-list-tile
            v-for="(item, index) in items"
            :to="!item.href ? { name: item.name } : null"
            :href="item.href"
            @click="item.click"
            ripple="ripple"
            :disabled="item.disabled"
            :target="item.target"
            rel="noopener"
            :key="index"
          >
            <v-list-tile-action v-if="item.icon">
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list>
      </v-menu>
    </v-toolbar>
    <v-navigation-drawer class="mail-drawer" fixed clipped v-model="drawer" app>
      <div class="layout column pa-3">
        <v-btn large block color="red" dark @click.stop="dialog = true"> + COMPOSE</v-btn>
      </div>
      <v-list class="mail-list" dense>
        <template v-for="item in menus">
          <v-layout row v-if="item.heading" align-center :key="item.heading">
            <v-flex xs12>
              <v-subheader v-if="item.heading">
                {{ item.heading }}
              </v-subheader>
              <v-divider></v-divider>
            </v-flex>
          </v-layout>
          <!-- Top level -->
          <v-list-tile v-else :key="item.text" :to="item.to">
            <v-list-tile-action v-if="item.icon">
              <v-icon :color="item.iconColor" :small="item.iconSize">{{ item.icon }}</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
            </v-list-tile-content>
            <!-- <v-chip class="caption red lighten-2 white--text chip--x-small mx-0" v-if="item.chip" label="label" small>{{ item.chip }}</v-chip> -->
          </v-list-tile>
        </template>
      </v-list>
    </v-navigation-drawer>
    <v-content>
      <transition>
        <router-view></router-view>
      </transition>
    </v-content>
    <v-dialog v-model="dialog" max-width="640px">
      <compose></compose>
    </v-dialog>
  </v-app>
</template>

<script>
import { MailMenu } from "@/api/mail"
import Compose from "./Compose"
export default {
  components: {
    Compose
  },
  props: {
    source: String
  },
  data: () => ({
    selected: [2],
    dialog: null,
    drawer: null,
    replayDialog: null,
    menus: MailMenu,
    items: [
      {
        icon: "account_circle",
        href: "#",
        title: "Profile",
        click: e => {
          console.log(e)
        }
      },
      {
        icon: "settings",
        href: "#",
        title: "Settings",
        click: e => {
          console.log(e)
        }
      },
      {
        icon: "fullscreen_exit",
        href: "#",
        title: "Logout",
        click: e => {
          console.log(e)
        }
      }
    ],
    mailActions: [
      {
        href: "#",
        title: "Delete",
        click: e => {
          console.log(e)
        }
      },
      {
        href: "Mark as read",
        title: "Mark as read",
        click: e => {
          console.log(e)
        }
      },
      {
        href: "Spam",
        title: "Spam",
        click: e => {
          console.log(e)
        }
      }
    ]
  }),

  created() {
    this.$on("MAIL_REPLY_DIALOG_CLOSE", () => {
      this.replayDialog = false
    })
    window.AppMail = this
  },
  methods: {
    handleClick(e) {
      console.log(e)
    },
    goBack() {
      this.$router.go(-1)
    },
    toggleDrawer() {
      this.drawer = this.drawer ? false : true
    },
    toggle(index) {
      const i = this.selected.indexOf(index)
      if (i > -1) {
        this.selected.splice(i, 1)
      } else {
        this.selected.push(index)
      }
    }
  }
}
</script>
<style lang="stylus"></style>
